<!-- 渐变柱形 -->
<template>
    <echarts :option="option" class="gradientBar"/>
</template>

<script>
import echarts from '@/components/echarts/echarts';
export default {
	name: 'gradient-bar',
	data () {
		return {
			xData: '',
			option: {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
						textStyle: {
							color: '#fff'
						}

					},
				},
				grid: {
					borderWidth: 0,
					textStyle: {
						color: '#fff'
					}
				},
				calculable: true,
				xAxis: [{
					'type': 'category',
					'axisLine': {
						lineStyle: {
							color: 'rgba(255,255,255,.5)'
						}
					},
					'splitLine': {
						'show': false
					},
					'axisTick': {
						'show': false
					},
					'splitArea': {
						'show': false
					},
					'axisLabel': {
						'interval': 0,
						color: 'rgba(255,255,255,0.7)',
						fontSize: 18
					},
					'data': '',
				}],
				yAxis: [{
					type: 'value',
					splitLine: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						interval: 0,
						color: 'rgba(255,255,255,0.5)',

					},
					splitArea: {
						show: false
					},

				}],
				series: [
					{
						name: '女',
						type: 'bar',
						stack: '总量',
						barMaxWidth: 35,
						barGap: '10%',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgba(35, 157, 250, 1)' // 0% 处的颜色
								}, {
									offset: 1,
									color: 'rgba(35, 157, 250, .4)' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
						'data': [
							709,
							1917,
							2455,
							2610,
							1719,
							1433
						],
					},
					{
						name: '中',
						type: 'bar',
						stack: '总量',
						barMaxWidth: 35,
						barGap: '10%',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgba(255, 133, 117, 1)' // 0% 处的颜色
								}, {
									offset: 1,
									color: 'rgba(255, 133, 117, .4)' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
						'data': [
							412,
							1917,
							2455,
							2610,
							1719,
							1433
						],
					},
					{
						name: '男',
						type: 'bar',
						stack: '总量',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgba(35, 250, 187, 1)' // 0% 处的颜色
								}, {
									offset: 1,
									color: 'rgba(35, 250, 187, .4)' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							},
							borderRadius: 0
						},
						data: [
							327,
							1776,
							507,
							1200,
							800,
							482
						]
					}
				]
			}
		};
	},

	components: { echarts },

	computed: {},

	// mounted: {},
	created () {
		this.getData();
	},
	methods: {
		getData () {
			const xData = (function () {
				const data = [];
				for (let i = 2; i < 8; i++) {
					data.push(i + '月');
				}
				return data;
			}());
			this.option.xAxis[0].data = xData;
			console.log(this.option.xAxis);
		}
	}
};

</script>
<style lang='less' rel="stylesheet/less" scoped>
.gradientBar{
        width:100%;
        height: 100%;
    }
</style>
